<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div>
    <h2 mat-dialog-title>Fetch Parameters</h2>
    <form class="parameter-provider-fetch-form" [formGroup]="fetchParametersForm">
        <context-error-banner [context]="ErrorContextKey.PARAMETER_PROVIDERS"></context-error-banner>

        <mat-dialog-content *ngIf="(updateRequest | async)! as requestEntity; else fetchFormContent">
            <div class="dialog-content flex gap-x-4 w-full pt-2">
                <div class="flex flex-col flex-1">
                    <div class="flex flex-col mb-4">
                        <div>Name</div>
                        <div class="tertiary-color font-medium">
                            {{ parameterProvider.component.name }}
                        </div>
                    </div>

                    <div class="flex flex-col mb-4">
                        <div>Parameter Groups</div>
                        <div class="tertiary-color font-medium">
                            {{ parameterGroupNames | sort | join }}
                        </div>
                    </div>
                </div>

                <div class="flex flex-col flex-1">
                    <div class="flex flex-col mb-4">
                        <div>Steps To Update Parameters</div>
                        <div class="flex flex-col gap-y-1.5">
                            <div
                                *ngFor="let updateStep of requestEntity.updateSteps"
                                class="flex justify-between items-center">
                                <div class="tertiary-color font-medium">
                                    {{ updateStep.description }}
                                </div>
                                <div
                                    *ngIf="updateStep.complete; else stepInProgress"
                                    class="fa fa-check complete success-color-default"></div>
                                <ng-template #stepInProgress>
                                    <div class="fa fa-spin fa-circle-o-notch primary-color"></div>
                                </ng-template>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex flex-1">
                    <div class="flex flex-col flex-1">
                        <div class="flex flex-col mb-4">
                            <div class="flex flex-row items-center gap-x-2">
                                Parameter Contexts To Create
                                <i
                                    class="fa fa-info-circle primary-color"
                                    nifiTooltip
                                    [tooltipComponentType]="TextTip"
                                    tooltipInputData="Parameter groups set to be created as parameter contexts, pending apply."></i>
                            </div>
                            <div
                                *ngIf="Object.keys(parameterContextsToCreate).length > 0; else none"
                                class="tertiary-color font-medium">
                                {{ Object.values(parameterContextsToCreate) | sort | join }}
                            </div>
                        </div>
                        <div class="flex flex-col mb-4">
                            <div class="flex flex-row items-center gap-x-2">
                                Parameter Contexts To Update
                                <i
                                    class="fa fa-info-circle primary-color"
                                    nifiTooltip
                                    [tooltipComponentType]="TextTip"
                                    tooltipInputData="Synced parameter contexts to be updated, pending apply."></i>
                            </div>
                            <div
                                *ngIf="parameterContextsToUpdate.length > 0; else none"
                                class="tertiary-color font-medium">
                                {{ parameterContextsToUpdate | sort | join }}
                            </div>
                        </div>
                        <div class="flex flex-1 flex-col">
                            <div class="flex flex-row items-center gap-x-2">
                                Affected Referencing Components
                                <i
                                    class="fa fa-info-circle primary-color"
                                    nifiTooltip
                                    [tooltipComponentType]="TextTip"
                                    tooltipInputData="Affected components referencing this parameter provider."></i>
                            </div>
                            <div class="relative h-full border">
                                <div class="absolute inset-0 overflow-y-auto p-1">
                                    <parameter-references
                                        [disabledLinks]="(saving$ | async)!"
                                        [parameterReferences]="
                                            parameterProvider.component.affectedComponents
                                        "></parameter-references>
                                </div>
                            </div>
                        </div>

                        <ng-template #none>
                            <div class="unset neutral-color">None</div>
                        </ng-template>
                    </div>
                </div>
            </div>
        </mat-dialog-content>

        <ng-template #fetchFormContent>
            <mat-dialog-content>
                <div class="dialog-content flex gap-x-4 h-full w-full pt-2">
                    <div class="flex flex-col flex-1">
                        <div class="flex flex-col mb-4">
                            <div>Name</div>
                            <div class="tertiary-color font-medium">
                                {{ parameterProvider.component.name }}
                            </div>
                        </div>

                        <div class="flex flex-col flex-1">
                            <div class="flex flex-row items-center gap-x-2">
                                Select To Configure a Parameter Group
                                <i
                                    class="fa fa-info-circle primary-color"
                                    nifiTooltip
                                    [tooltipComponentType]="TextTip"
                                    tooltipInputData="Discovered parameter groups from this parameter provider. Select a group to create a parameter context, then configure its parameter sensitivities."></i>
                            </div>
                            <div class="flex-1">
                                <parameter-groups-table
                                    [parameterGroups]="parameterGroupConfigurations"
                                    (selected)="parameterGroupSelected($event)"></parameter-groups-table>
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-1">
                        <ng-container *ngFor="let parameterGroupConfig of parameterGroupConfigurations">
                            <!-- Only show the parameters associated with the selected group -->
                            <div
                                [formGroupName]="parameterGroupConfig.groupName"
                                [ngClass]="{
                                    hidden: parameterGroupConfig.groupName !== selectedParameterGroup?.groupName
                                }"
                                class="flex gap-y-4 h-full w-full flex-col">
                                <ng-container
                                    *ngIf="canCreateParameterContext(parameterGroupConfig); else paramContextSynced">
                                    <!-- Not synced, give the user the option to create a parameter context for the group -->
                                    <div class="flex items-center">
                                        <mat-checkbox
                                            formControlName="createParameterContext"
                                            (change)="createParameterContextToggled($event)">
                                            <mat-label>Create Parameter Context</mat-label>
                                        </mat-checkbox>
                                    </div>
                                    <div
                                        class="flex flex-col"
                                        *ngIf="canEditParameterContextName(parameterGroupConfig)">
                                        <mat-form-field>
                                            <mat-label>Parameter Context Name</mat-label>
                                            <input
                                                matInput
                                                type="text"
                                                formControlName="parameterContextName"
                                                [value]="parameterGroupConfig.parameterContextName" />
                                        </mat-form-field>
                                    </div>
                                </ng-container>

                                <!-- If the group is synchronized, show the parameter context name in read-only mode -->
                                <ng-template #paramContextSynced>
                                    <div class="flex flex-col">
                                        <div>Parameter Context Name</div>
                                        <div class="tertiary-color font-medium">
                                            {{ parameterGroupConfig.parameterContextName }}
                                        </div>
                                    </div>
                                </ng-template>

                                <ng-container *ngIf="showParameterList(parameterGroupConfig); else parameterMapping">
                                    <!-- Show the parameters defined -->
                                    <div class="flex flex-1 flex-col overflow-hidden">
                                        <div class="flex items-center gap-x-2">
                                            Fetched Parameters
                                            <i
                                                class="fa fa-info-circle primary-color"
                                                nifiTooltip
                                                [tooltipComponentType]="TextTip"
                                                tooltipInputData="Discovered parameters from the selected parameter group."></i>
                                        </div>
                                        <ul class="flex-1 overflow-y-auto border px-2">
                                            <li
                                                *ngFor="
                                                    let param of Object.entries(
                                                        parameterGroupConfig.parameterSensitivities
                                                    )
                                                "
                                                class="tertiary-color font-medium">
                                                {{ param[0] }}
                                            </li>
                                        </ul>
                                    </div>
                                </ng-container>

                                <ng-template #parameterMapping>
                                    <div class="flex flex-1 flex-col">
                                        <div class="flex flex-row items-center gap-x-2">
                                            Select Parameters To Be Set As Sensitive
                                            <i
                                                class="fa fa-info-circle primary-color"
                                                nifiTooltip
                                                [tooltipComponentType]="TextTip"
                                                tooltipInputData="Only parameters that are not referenced can be modified."></i>
                                        </div>

                                        <div class="flex-1 relative">
                                            <div class="listing-table overflow-y-auto absolute inset-0">
                                                <table
                                                    mat-table
                                                    [dataSource]="getParameterMappingDataSource(parameterGroupConfig)"
                                                    matSort
                                                    matSortDisableClear
                                                    matSortActive="name"
                                                    matSortDirection="asc"
                                                    (matSortChange)="sort($event)">
                                                    <ng-container matColumnDef="sensitive">
                                                        <th mat-header-cell *matHeaderCellDef>
                                                            <mat-checkbox
                                                                class="tertiary-checkbox"
                                                                [checked]="areAllSelected(parameterGroupConfig)"
                                                                [indeterminate]="areAnySelected(parameterGroupConfig)"
                                                                (change)="selectAllChanged($event)"></mat-checkbox>
                                                        </th>
                                                        <td mat-cell *matCellDef="let item" class="items-center">
                                                            <mat-checkbox
                                                                [formControl]="
                                                                    getFormControl(item, parameterGroupConfig)
                                                                "
                                                                [checked]="item.sensitivity.sensitive"></mat-checkbox>
                                                        </td>
                                                    </ng-container>

                                                    <ng-container matColumnDef="name">
                                                        <th mat-header-cell *matHeaderCellDef mat-sort-header>
                                                            Parameter Name
                                                        </th>
                                                        <td mat-cell *matCellDef="let item" class="items-center">
                                                            <div>{{ item.name }}</div>
                                                        </td>
                                                    </ng-container>

                                                    <ng-container matColumnDef="indicators">
                                                        <th mat-header-cell *matHeaderCellDef></th>
                                                        <td mat-cell *matCellDef="let item">
                                                            <div class="flex items-center gap-x-2 justify-end">
                                                                <div
                                                                    class="fa fa-hashtag primary-color"
                                                                    title="Parameter is currently referenced by a property. The sensitivity cannot be changed."
                                                                    *ngIf="isReferenced(item)"></div>
                                                                <div
                                                                    class="fa fa-asterisk primary-color"
                                                                    [title]="getAffectedTooltip(item)"
                                                                    *ngIf="isAffected(item)"></div>
                                                            </div>
                                                        </td>
                                                    </ng-container>

                                                    <tr
                                                        mat-header-row
                                                        *matHeaderRowDef="displayedColumns; sticky: true"></tr>
                                                    <tr
                                                        mat-row
                                                        *matRowDef="let row; let even = even; columns: displayedColumns"
                                                        (click)="selectParameter(row)"
                                                        [class.selected]="isParameterSelected(row)"
                                                        [class.even]="even"></tr>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </ng-template>
                            </div>
                        </ng-container>
                    </div>
                    <div class="flex flex-1">
                        <div class="flex flex-col flex-1">
                            <div class="flex flex-col mb-4">
                                <div class="flex flex-row items-center gap-x-2">
                                    Parameter Contexts To Create
                                    <i
                                        class="fa fa-info-circle primary-color"
                                        nifiTooltip
                                        [tooltipComponentType]="TextTip"
                                        tooltipInputData="Parameter groups set to be created as parameter contexts, pending apply."></i>
                                </div>
                                <div
                                    *ngIf="Object.keys(parameterContextsToCreate).length > 0; else none"
                                    class="tertiary-color font-medium">
                                    {{ Object.values(parameterContextsToCreate) | sort | join }}
                                </div>
                            </div>
                            <div class="flex flex-col mb-4">
                                <div class="flex flex-row items-center gap-x-2">
                                    Parameter Contexts To Update
                                    <i
                                        class="fa fa-info-circle primary-color"
                                        nifiTooltip
                                        [tooltipComponentType]="TextTip"
                                        tooltipInputData="Synced parameter contexts to be updated, pending apply."></i>
                                </div>
                                <div
                                    *ngIf="parameterContextsToUpdate.length > 0; else none"
                                    class="tertiary-color font-medium">
                                    {{ parameterContextsToUpdate | sort | join }}
                                </div>
                            </div>
                            <div class="flex flex-1 flex-col">
                                <div class="flex flex-row items-center gap-x-2">
                                    Referencing Components
                                    <i
                                        class="fa fa-info-circle primary-color"
                                        nifiTooltip
                                        [tooltipComponentType]="TextTip"
                                        tooltipInputData="Components referencing this selected parameter."></i>
                                </div>
                                <div class="relative h-full border">
                                    <div class="absolute inset-0 overflow-y-auto p-1">
                                        <parameter-references
                                            [parameterReferences]="parameterReferences"></parameter-references>
                                    </div>
                                </div>
                            </div>

                            <ng-template #none>
                                <div class="unset neutral-color">None</div>
                            </ng-template>
                        </div>
                    </div>
                </div>
            </mat-dialog-content>
        </ng-template>

        <mat-dialog-actions align="end" *ngIf="{ value: (saving$ | async)! } as saving">
            <ng-container *ngIf="updateRequest | async; else normalActions">
                <!-- an update to the associated parameter context(s) has been triggered -->
                <button mat-button mat-dialog-close>
                    <span *nifiSpinner="saving.value">Close</span>
                </button>
            </ng-container>
            <ng-template #normalActions>
                <button mat-button mat-dialog-close>Cancel</button>
                <button
                    [disabled]="!canSubmitForm() || saving.value"
                    type="button"
                    (click)="submitForm()"
                    mat-flat-button>
                    <span *nifiSpinner="saving.value">Apply</span>
                </button>
            </ng-template>
        </mat-dialog-actions>
    </form>
</div>
